{% extends 'web/base.html' %}

{% block Meta %}
    {{ block.super }}
{% endblock %}

{% block title %}
    {{ block.super }}
{% endblock %}

{% block Css %}
    {{ block.super }}
{% endblock %}

{% block Js %}
    {{block.super}}
    <script>

    function newpage(url) {
	$.get(url,function (data) {
        list = data['results']
        next = data['next']
        console.log(list)
        console.log(next)
        var  htmlimg
        htmlimg = ''
        console.log(htmlimg)
        for(i = 0; i<=8; i++ ) {
            htmlimg += '<div class="col-md-4 gallery-left">'
            htmlimg += '<a href="/game/single/'
            htmlimg += String(list[i]['game_id']) + '"'
            htmlimg += 'class=" mask b-link-stripe b-animate-go   swipebox"  title="'
            htmlimg += list[i]['title'] + '">' + '<img src="'
            htmlimg += list[i]['g_image']
            htmlimg += '" alt="" class="img-responsive zoom-img"/> </a> </div>'
        }
        console.log(htmlimg)
        $('.gallery-one').html(htmlimg)
        if (data['previous'])
        {
            var page
            page = '<a>上一页</a>'
            page += '<a>下一页</a>'
        }



    })
 }
    newpage('/list/gamenumber/')
    </script>
{% endblock %}

{% block content %}
	<!--start-home-->
	<div id="home" class="header">
		{% block header-top %}
            {{ block.super }}
        {% endblock %}
		<!-- banner-bottom -->
		<div class="banner two">
		</div>
	</div>
	<!--games-->
	<div class="gallery">
		<div class="container">
		         <h3>Gallery</h3>
			<div class="portfolio-bottom">
				<div class="gallery-one">

					<div class="clearfix"> </div>

                        <a>上一页</a>
                        <a>下一页</a>
				</div>
			</div>
		</div>

	</div>
	<!--swipebox -->	
<link rel="stylesheet" href="/static/web/css/swipebox.css">
<script src="/static/web/js/jquery.swipebox.min.js"></script>
<script type="text/javascript">
					jQuery(function($) {
						$(".swipebox").swipebox();
					});
				</script>
			<!--//swipebox Ends -->

   <!--footer--->
		<div class="footer text-center">
				<div class="container">
					<div class="footer-grids">
						<div class="col-md-6 footer-text">  
							<h3>About Us</h3>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since, Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
							<a class="read" href="news.html">Read More</a>
						</div>
						<div class="col-md-6 footer-info">
							<h3>Get In Touch</h3>
							<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.Lorem Ipsum has been the industry's standard dummy text ever since, </p>
							<div class="support">
							   <input type="text" class="text" value="Enter email..." onfocus="this.value = '';" onblur="if (this.value == 'Enter email...') {this.value = 'Enter email...';}">
							   <input type="submit" value="SUBSCRIBE" class="botton">
							</div>
					</div>
					<div class="clearfix"> </div>
				</div>
					<div class="copy">
		              <p>Copyright &copy; 2015.Company name All rights reserved.More Templates <a href="http://www.cssmoban.com/" target="_blank" title="模板之家">模板之家</a> - Collect from <a href="http://www.cssmoban.com/" title="网页模板" target="_blank">网页模板</a></p>
		            </div>
				</div>
			</div>
			<!--start-smoth-scrolling-->
			<script type="text/javascript">
								jQuery(document).ready(function($) {
									$(".scroll").click(function(event){		
										event.preventDefault();
										$('html,body').animate({scrollTop:$(this.hash).offset().top},1000);
									});
								});
								</script>
							<!--start-smoth-scrolling-->
						<script type="text/javascript">
									$(document).ready(function() {
										/*
										var defaults = {
								  			containerID: 'toTop', // fading element id
											containerHoverID: 'toTopHover', // fading element hover id
											scrollSpeed: 1200,
											easingType: 'linear' 
								 		};
										*/
										
										$().UItoTop({ easingType: 'easeOutQuart' });
										
									});
								</script>
		<a href="#home" id="toTop" class="scroll" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
{% endblock %}